Question Loading...

Understanding perspective, perspective-origin, and transform-style: preserve-3d in CSS 3D Transforms

In CSS 3D transformations, perspective, perspective-origin, and transform-style: preserve-3d work together to control how depth and 3D positioning appear on screen. They define the viewing distance, the viewpoint position, and how nested elements maintain 3D space.

The perspective property defines how far the viewer is from the Z=0 plane, effectively determining the strength of the 3D effect. A smaller value (e.g., 200px) creates a more intense depth effect, while a larger value (e.g., 1000px) flattens the view.

In this example, the parent .scene provides a perspective, making the rotated .box appear as if it’s turning in real 3D space.

The perspective-origin property defines the point from which the viewer observes the 3D scene — similar to moving the camera’s position. By default, it’s at the center (50% 50%), but you can shift it horizontally or vertically.

Changing the origin alters how rotations appear. For example, rotating around the Y-axis looks different if the viewer’s perspective is from the left instead of the center.

The transform-style property determines whether child elements of a 3D-transformed element retain their 3D position. Setting transform-style: preserve-3d ensures that child elements are rendered in the same 3D space, maintaining depth and perspective relationships.

This property is essential for effects like 3D card flips, where both the front and back faces need to remain in the same 3D plane as the parent element rotates.